@page-background: #ececec;
@content-background: #FFF;
@head-background: #595959;
@gap: 8px;
@times: 1, 2, 3, 4, 5, 6;

body {
  background: @page-background;
}

.header-button {
  margin-top: 20px;
}

.main-wrapper {
  border-radius: 4px;
  padding: 24px 0 0;
  margin: 0 48px 24px;
  background: @content-background;
}

.App-logo {
  height: 60px;

}

.App-header {
  background: @head-background;
  padding: 24px 48px 24px 48px;
  color: white;
  height: auto;
}

.header-bell{
  margin-top: 17px;
  text-align: right;
  line-height: 36px;
}

.main-content{
  padding: 0 50px;
}

.content-layout{
  padding: 24px 0;
  background: #fff;
}

.content-layout-sider{
  background: #fff;
}

.content-children-content{
  padding: 0 24px;
  min-height: 280;
}

.footer{
  text-align: center;
}

.logo {
  float: left;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

.make-gap-classes(@i: length(@times)) when (@i > 0) {
  .make-gap-classes(@i - 1);
  @time: extract(@times, @i);
  .margin-l-@{time} {
    margin-left: @gap * @time;
  }

  .margin-r-@{time} {
    margin-right: @gap * @time;
  }

  .margin-t-@{time} {
    margin-top: @gap * @time;
  }

  .margin-b-@{time} {
    margin-bottom: @gap * @time;
  }
}

.make-gap-classes();

.mark-down-wrap {
  padding: @gap*2;
  background: #fbfbfb;
  border: #e9e9e9 1px solid;
  border-radius: 4px;
}

.menu-header{
  height: 100%;
}

.content-breadcrumb{
  margin: 12px 0;
}

.header-dropdown{
  float: right;
}

.tws-btn-group {
  button + button {
    margin-left: @gap;
  }
}

.bootcamp-row{
  margin-left: 3%;
}

.bootcamp-row .bootcamp-description{
  background-color: #f5f5f5;
}
